<template>
<div>
    <div class="table_header">
      <el-button type="primary" size="mini" @click="showUser('add')">新增</el-button>
    </div>
    <el-table :data="list" style="width: 100%" class="tableContent">
      <el-table-column prop="username" label="用户名" class="backColor"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" :formatter="getRealDate"></el-table-column>
      <el-table-column prop="prop" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="delUser(scope.row)">删除</el-button>
          <el-button type="text" @click="updateUser(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-user
      v-if="userVisible"
      :userVisible.sync="userVisible"
      :form="userDetail"
      :type="type"
      :db="db"
      @reloadList="getList"
    ></add-user>
  </div>
</template>

<script>
import { uuid,formatterDate  } from "@/assets/js/utils.js";
import addUser from "@/components/addUser";
export default {
  name: "indexeddb",
  components: { addUser },
  data() {
    return {
      request: null,
      db:null,
      list: [],
      userVisible: false,
      userDetail: {}
    };
  },
  created() {
    this.personDb = new this.$AllDB("myDB","person",objectStore=>{
      objectStore.createIndex("username", "username", { unique: false });
      objectStore.createIndex("email", "email", { unique: true });
    },this.getList);
  },
  methods: {
     getCurResult(){
       return this.personDb.getCurrentRequest();
     },
     getList() {
      var curRequest = this.getCurResult().getAll();
      this.personDb.resultObj(curRequest,event=>{
           var lastResult = event.target.result;
           this.list = lastResult;
      })
    },
    getRealDate(row, column, cellValue, index) {
      return formatterDate(cellValue, "YY-MM-DD hh:mm:ss w");
    },
    showUser(type) {
      this.db = this.personDb.getDb();
      this.userVisible = true;
      this.type = type;
      if(type=="add"){
        this.userDetail = {};
      }
    },
    delUser(row) {
      let id = row.id;
      this.$confirm("是否确定删除该数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
       var curRequest = this.getCurResult().delete(id);
       this.personDb.resultObj(curRequest,event=>{
         this.$message.success("删除成功");
         this.getList();
       })
      });
    },
    updateUser(row){
     let id = row.id;
     var curRequest = this.getCurResult().get(id);
       this.personDb.resultObj(curRequest,event=>{
          var lastResult = event.target.result;
          this.userDetail = lastResult;
          this.showUser('upd')
       })
    }
  }
};
</script>

<style lang="less">
.table_header {
  margin-bottom: 14px;
  display: flex;
  justify-content: flex-end;
}
</style>